import { defineComponent, shallowRef } from 'vue'
import menu1 from '@/views/menu/menu1/index.vue'
export default defineComponent({
  name: 'CodePreview',
  props: {
    code: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    
    const code = ref(props.code)
    console.log('code',code.value)
    const dynamicComponent = shallowRef({
      component: {
        template: code.value,
      },
    })
    watch(
      ()=>props.code,
      ()=>{
        code.value = props.code
        dynamicComponent.value = {
          component: {
            template: code.value,
          },
        }
      },
      {immediate: true}
    )
    
    return {
      dynamicComponent,
    }
  },
  render() {
    const renderComponent = this.dynamicComponent.component;
    return (
        <div class="w-full h-full flex space-x-2 px-4">
            <renderComponent></renderComponent>
            <menu1></menu1>
        </div>
      );
  }
})
